import React, { useState, useEffect } from 'react'
import { useHistory } from 'react-router';
import { useSelector, useDispatch } from "react-redux";
import { MembersWrapper, MeberContentWrapper, MeberBtnWrapper, MeberScrollWrapper } from "./styleMembers"
import Navbar from "@/components/myComponents/navBar/Navbar"
import Label from '@/components/myComponents/label/Label';
import { loadDataUserInfoSync } from '../store/actionCreator';

const Members = () => {
    const history = useHistory()
    const addClickHander = () => {
        history.push('/My/addMember')
    }

    const userInfo = useSelector((state) => {
        return state.getIn(['My', 'userInfo'])
    })
    const dispatch = useDispatch()
    useEffect(() => {
        (async () => {
            await dispatch(loadDataUserInfoSync())
        })()
    }, [dispatch])
    const [userinfo, setUserinfo] = useState({})
    useEffect(() => {
        if (userInfo.length > 0) {
            setUserinfo(userInfo)
        }
    }, [userInfo])

    return (
        <MembersWrapper>
            <Navbar
                back={true}
                title="家庭成员管理"
            >
            </Navbar>
            <MeberScrollWrapper>
                {
                    userinfo.length > 0
                        ? (() => {
                            return userinfo.map((item) => {
                                return (
                                    <MeberContentWrapper key={item.id}>
                                        <div>
                                            <div className="meber_img">
                                                <img src={item.img} alt="" />
                                            </div>
                                            <div className="meber_info">
                                                <div className="meber_info_title">
                                                    <h3>{item.name}</h3>
                                                    <Label
                                                        size=".12rem"
                                                        color="#3dd4a7"
                                                        bgcolor="#eafaf5"
                                                        padding=".05rem .1rem"
                                                        margin="0 0 0 .1rem"
                                                        borderRadius=".1rem"
                                                        border="0"
                                                    > {item.relation} </Label>
                                                </div>
                                                <div className="meber_info_cont">
                                                    <span>{item.sex}</span>
                                                    <span>{item.age}岁</span>
                                                </div>
                                                <div className="meber_info_cont">
                                                    {item.doctorTeamid ? "签约团队:李明明团队" : ""}
                                                </div>
                                            </div>
                                        </div>
                                    </MeberContentWrapper>
                                )
                            })

                        })()
                        : ""
                }

                <MeberBtnWrapper>
                    <div onClick={addClickHander}>+ 新增家庭成员</div>
                </MeberBtnWrapper>
            </MeberScrollWrapper>

        </MembersWrapper>

    );
}

export default Members;